<div class="main-container">
  <div class="search-wrap">
    <div class="year-pick-wrap">
      <strong>年度：</strong>
      <nz-select nzAllowClear nzPlaceHolder="年度" [(ngModel)]="yearValue" style="width: 120px;margin-right: 30px;">
        <nz-option nzLabel="2020" [nzValue]="2020"></nz-option>
        <nz-option nzLabel="2019" [nzValue]="2019"></nz-option>
        <nz-option nzLabel="2018" [nzValue]="2018"></nz-option>
        <nz-option nzLabel="2017" [nzValue]="2017"></nz-option>
        <nz-option nzLabel="2016" [nzValue]="2016"></nz-option>
      </nz-select>
    </div>

    <div class="month-pick-wrap">
      <strong>月份：</strong>
      <nz-radio-group [(ngModel)]="monthPickerValue" [nzButtonStyle]="'solid'" (ngModelChange)="monthPickerChange($event)">
        <label nz-radio-button [nzValue]="3">4月</label>
        <label nz-radio-button [nzValue]="4">5月</label>
        <label nz-radio-button [nzValue]="5">6月</label>
        <label nz-radio-button [nzValue]="6">7月</label>
        <label nz-radio-button [nzValue]="7">8月</label>
        <label nz-radio-button [nzValue]="8">9月</label>
        <label nz-radio-button [nzValue]="9">10月</label>
        <label nz-radio-button [nzValue]="10">11月</label>
      </nz-radio-group>
    </div>

    <div class="button-wrap">
      <button nz-button nzType="primary">打印</button>
      <button nz-button nzType="primary">导出</button>
    </div>

  </div>

  <div class="main-container">
    <div class="box-container">
      <div class="main-content">
        <div class="main-content-wrap">
          <div class="left-panel">
            <div style="margin: 10px 15px;">
              <nz-input-group [nzSuffix]="suffixIcon">
                <input type="text" nz-input placeholder="Search" [(ngModel)]="treeSearchValue" />
              </nz-input-group>
              <ng-template #suffixIcon>
                <i nz-icon nzType="search"></i>
              </ng-template>
            </div>

            <nz-tree
              [nzSearchValue]="treeSearchValue"
              [nzData]="treeData"
              (nzClick)="checkDetail($event.node.origin)"
              [nzSelectedKeys]="defaultKeys"
              [nzExpandedKeys]="expandKeys"
            >
            </nz-tree>
          </div>

          <div class="right-panel">
            <div class="right-top-box">

              <div class="right-content">
                <nz-card [nzTitle]="stationName + '用水过程线'"
                         class="card">
                  <div
                    echarts
                    [options]="processOpt"
                    [merge]="processOptChange"
                    style="height: 329px;"
                  ></div>
                </nz-card>

                <nz-card [nzTitle]="stationName + '历史同期对比'"
                         class="card" [nzExtra]="lstqCardTemplate">
                  <div
                    echarts
                    [options]="historyOpt"
                    [merge]="historyOptChange"
                    style="height: 291px;"
                  ></div>
                </nz-card>
                <ng-template #lstqCardTemplate>
                  <div class="card-search-wrap">
                    <div>
                      <!--<span>类型：</span>-->
                      <nz-select
                        [(ngModel)]="hType"
                        [nzAllowClear]="true"
                        nzPlaceHolder="类型"
                      >
                        <nz-option
                          *ngFor="let item of historyTypes"
                          [nzValue]="item.value"
                          [nzLabel]="item.label"
                        ></nz-option>
                      </nz-select>
                    </div>
                    <div>
                      <!--<span>历史年：</span>-->
                      <nz-year-picker
                        style="width: 80px;"
                        [(ngModel)]="historyYear1"
                        nzPlaceHolder="历史年份1"></nz-year-picker>
                      vs
                      <nz-year-picker
                        style="width: 80px;"
                        [(ngModel)]="historyYear2"
                        nzPlaceHolder="历史年份2"></nz-year-picker>
                    </div>
                    <div>
                      <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryHistory()"></i>
                    </div>
                  </div>
                </ng-template>

                <nz-card [nzTitle]="stationName + '特征及统计值'"
                         class="card">
                  <form
                    [nzLayout]="'vertical'"
                    nz-form [formGroup]="featureForm"
                    class="form-content">
                    <div nz-row [nzGutter]="36">
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>最大值</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="最大值" formControlName="maxVal">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>最小值</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="最小值" formControlName="minVal">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>最大值出现时间</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="最大值出现时间" formControlName="maxTime">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>最小值出现时间</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="最小值出现时间" formControlName="minTime">
                          </nz-form-control>
                        </nz-form-item>
                      </div>

                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>平均值</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="平均值" formControlName="avgVal">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>中位值</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="中位值" formControlName="medianVal">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>前3年平均值</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="前3年平均值" formControlName="last3AvgVal">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="12">
                        <nz-form-item>
                          <nz-form-label>前3年中位值</nz-form-label>
                          <nz-form-control>
                            <input nz-input placeholder="前3年中位值" formControlName="last3MedianVal">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                    </div>
                  </form>
                </nz-card>

                <nz-card [nzTitle]="stationName + '监测数据'"
                         [nzBodyStyle]="{height: '460px'}"
                         class="card">
                  <nz-table
                    #dataTable
                    nzBordered
                    [nzData]="tableData"
                    nzShowPagination
                    nzSize="middle"
                  >
                    <thead>
                    <tr>
                      <th>日期</th>
                      <th>月用水量</th>
                      <th>累计用水量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let row of dataTable.data">
                      <td>{{ row.time }}</td>
                      <td>{{ row.val }}</td>
                      <td>{{ row.valTotal }}</td>
                    </tr>
                    </tbody>
                  </nz-table>
                </nz-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>

</div>
